iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 28
0
Modern Web

用30天了解javascript系列 第 28

[ 用30天了解javascript]Day28.模板字串(Template literals)

  • 分享至 

  • xImage
  •  

在ES6以前,要把內容從js中加到html時,使用雙引號( "" )或單引號( '' ),用加號( + )做串接橋樑,還需要留意是否要留空白。有了模板字串,可讀性跟開發效率就會提升不少。

模板字串特性:

  • 使用反引號( ` ) (鍵盤左上角的~),插值的變數名稱填入 ${變數或是表達式} 括號裡
  • 可以定義多行字串

傳統寫法:

//html想要的畫面
<ul class="menu">
  <li>蘋果1顆10元</li>
	<li>西瓜1顆100元</li>
	<li>橘子1顆10元</li>
</ul>
//資料結構
const data = [{
    name: '蘋果',
    cash: 10
},{
    name: '西瓜',
    cash: 1000
},{
    name: '小夫',
    cash: 1500
}];
//JS寫法
const listString = '<ul>' +
    '<li>fruit[0].name 1顆fruit[0].cash元</li>' +
    '<li>fruit[1].name 1顆fruit[1].cash元</li>' +
    '<li>fruit[2].name 1顆fruit[2].cash元</li>' +
'</ul>';

模板字串寫法:

const listString = `<ul>
  <li>${fruit[0].name} 1顆${fruit[0].cash} 元</li>
  <li>${fruit[1].name} 1顆${fruit[1].cash} 元</li>
	<li>${fruit[2].name} 1顆${fruit[2].cash} 元</li>
</ul>`;

VSCode搭配Emmet撰寫模板字串HTML結構

開啟VScode,點左下角設定

https://ithelp.ithome.com.tw/upload/images/20200928/201120533lR35nvsJI.png

右上角點進去settings.json

https://ithelp.ithome.com.tw/upload/images/20200928/20112053T44h2lCDQB.png

輸入這段文字後,儲存,就可以打出HTML的結構囉

https://ithelp.ithome.com.tw/upload/images/20200928/201120534Q02omburP.png

{
    // emmet tab 自動展開
    "emmet.triggerExpansionOnTab": true,
    // template 展開
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "vue-html": "html",
        "plaintext": "jade",
        "ejs": "html",
    },
}

上一篇
[用30天了解javascript]Day27.AJAX
下一篇
[用30天了解javascript]Day29. Promise
系列文
用30天了解javascript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言